@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('//at.alicdn.com/t/webfont_tbkgq3ch64.eot'); /* IE9*/
    src: url('//at.alicdn.com/t/webfont_tbkgq3ch64.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('//at.alicdn.com/t/webfont_tbkgq3ch64.woff2') format('woff2'),
    url('//at.alicdn.com/t/webfont_tbkgq3ch64.woff') format('woff'), /* chrome、firefox */
    url('//at.alicdn.com/t/webfont_tbkgq3ch64.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('//at.alicdn.com/t/webfont_tbkgq3ch64.svg#杨任东竹石体-Bold') format('svg'); /* iOS 4.1- */
}
body,html{
    background-color: #f6f6f8;
    overflow-x: hidden;
}

@keyframes rolate{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(10deg) translateY(2px);
    }
    50%{
        transform: rotate(0deg) translateY(3px);
    }
    75%{
        transform: rotate(-10deg) translateY(5px);
    }
    100%{
        transform: rotate(0deg) translateY(0px);
    }
}

.pages{
    width: 100%;
    nav{
        width: 1000px;
        .bg{
            width: 100%;
            height: 50px;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1;
            background-color: #fff;
        }
        ul{
            padding: 0 15px;
            width: 1000px;
            background-color: #fff;
            z-index: 2;
            // padding: 0 20px;
            list-style: none;
            // display: flex;
            overflow: hidden;
            // justify-content: space-around;
            position: fixed;
            height: 50px;
            line-height: 50px;
            left: 0;
            top: 0;
            li{
               width: 100px;
               float: left;
               font-size: 16px;
               font-family: 'webfont';

            //    font-weight: bold;
               &.active{
                   background-image: url(../../images/backIcon.98d2c2b2.png);
                   background-size: 50px;
                   background-position: 8px;
                   background-repeat: no-repeat;
                }
            }
        }
    }
    article{
        width: 90%;
        margin: 50px auto;
        .loading{
            position: fixed;
            top: 200px;
            width: 100%;
            img{
                display: block;
                margin: 10px auto;
                width: 10%;
                animation: rolate 1s linear infinite;
            }
            .load_t{
                text-align: center;
                color: #ccc;
                font-size: 12px;
            }
        }
        .empty{
            width: 100%;
            display: none;
            img{
                display: block;
                margin: 200px auto 0;
            }
            .load_t{
                text-align: center;
                color: #ccc;
            }
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0;
            li{
                background-color: #fff;
                width: 48%;
                margin-top: 8px;
                // padding-bottom: 10px;
                box-sizing: border-box;
                border-radius: 10px;
                overflow: hidden;
                position: relative;
                a{
                    color: #000;
                    text-decoration: none;
                }
                .img{
                    position: relative; 
                    .flag{
                        position: absolute;
                        top: 0;
                        left: 0px;
                        padding: 2px 4px;
                        color: white;
                        background-color: rgba(0, 0, 0, .5);
                        font-size: 12px;
                        border-bottom-right-radius: 10px;
                    }
                    img{
                        display: block;
                        width: 100%;
                        border-radius: 10px;
                    }
                }

                .desc{
                    width: 100%;
                    padding: 0 10px;
                    color: #9a9a9a;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    font-size: 12px;
                }
               
                .title{
                    margin: 3px 0;
                    padding: 0 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-overflow: -o-ellipsis-lastline;
                    display: -webkit-box;
                    line-clamp: 2;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    text-align: justify;
                }
                .price{
                    padding: 10px;
                    font-size: 12px;
                    display: flex;
                    justify-content: space-between;
                }
            }
        } 
    }
}